<template>
  <div class="admin-container">
    <!-- 侧边栏 -->
    <div class="sidebar" :class="{ 'sidebar-collapse': isCollapse }">
      <div class="logo-container">
        <img src="@/assets/logo.png" alt="Logo" class="logo-img">
        <span class="logo-text" v-show="!isCollapse">管理系统</span>
      </div>
      
      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :unique-opened="true"
          class="sidebar-menu"
          @select="handleSelect"
        >
          <el-menu-item index="/adminsystem/dashboard">
            <el-icon><Odometer /></el-icon>
            <template #title>仪表盘</template>
          </el-menu-item>
          
          <el-menu-item index="/adminsystem/users">
            <el-icon><User /></el-icon>
            <template #title>用户管理</template>
          </el-menu-item>
          
          <el-menu-item index="/adminsystem/files">
            <el-icon><Folder /></el-icon>
            <template #title>文件管理</template>
          </el-menu-item>
          
          <el-menu-item index="/adminsystem/payment">
            <el-icon><Money /></el-icon>
            <template #title>支付管理</template>
          </el-menu-item>
          
          <el-menu-item index="/adminsystem/settings">
            <el-icon><Setting /></el-icon>
            <template #title>系统设置</template>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </div>

    <!-- 主内容区 -->
    <div class="main-container" :class="{ 'main-expanded': isCollapse }">
      <!-- 顶部导航栏 -->
      <div class="navbar">
        <div class="navbar-left">
          <el-button
            type="text"
            class="toggle-button"
            @click="toggleSidebar"
          >
            <el-icon :size="20">
              <component :is="isCollapse ? 'Expand' : 'Fold'" />
            </el-icon>
          </el-button>
          
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/adminsystem/dashboard' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentRoute }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="navbar-right">
          <el-dropdown trigger="click">
            <div class="admin-info">
              <el-avatar :size="32" :src="adminAvatar" />
              <span class="admin-name">{{ adminName }}</span>
              <el-icon><CaretBottom /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleProfile">
                  <el-icon><User /></el-icon>个人信息
                </el-dropdown-item>
                <el-dropdown-item @click="handleLogout">
                  <el-icon><SwitchButton /></el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  Odometer,
  User,
  Folder,
  Money,
  Setting,
  Expand,
  Fold,
  CaretBottom,
  SwitchButton
} from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 侧边栏折叠状态
const isCollapse = ref(false)

// 当前激活的菜单
const activeMenu = computed(() => route.path)

// 当前路由名称
const currentRoute = computed(() => {
  const routeMap = {
    '/adminsystem/dashboard': '仪表盘',
    '/adminsystem/users': '用户管理',
    '/adminsystem/files': '文件管理',
    '/adminsystem/payment': '支付管理',
    '/adminsystem/settings': '系统设置'
  }
  return routeMap[route.path] || '未知页面'
})

// 管理员信息
const adminAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
const adminName = ref('Admin')

// 切换侧边栏
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 菜单选择
const handleSelect = (index) => {
  router.push(index)
}

// 个人信息
const handleProfile = () => {
  // 实现查看个人信息的逻辑
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实现退出登录的逻辑
    router.push('/login')
  })
}
</script>

<style lang="scss" scoped>
.admin-container {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
  
  .sidebar {
    width: 240px;
    height: 100%;
    background: linear-gradient(180deg, #1a237e 0%, #0d47a1 100%);
    transition: all 0.3s;
    position: relative;
    z-index: 1000;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
    
    &.sidebar-collapse {
      width: 64px;
      
      .logo-container {
        padding: 16px 12px;
        
        .logo-img {
          margin: 0;
        }
      }
    }
    
    .logo-container {
      height: 60px;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
      .logo-img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }
      
      .logo-text {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0.95;
      }
    }
    
    .sidebar-menu {
      border: none;
      background: transparent;
      
      :deep(.el-menu-item) {
        height: 50px;
        line-height: 50px;
        color: rgba(255, 255, 255, 0.7);
        margin: 4px 0;
        
        &:hover {
          color: #fff;
          background: rgba(255, 255, 255, 0.1);
        }
        
        &.is-active {
          color: #fff;
          background: rgba(255, 255, 255, 0.15);
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #fff;
            border-radius: 0 4px 4px 0;
          }
        }
        
        .el-icon {
          font-size: 18px;
          margin-right: 12px;
        }
      }
    }
  }
  
  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    margin-left: 240px;
    
    &.main-expanded {
      margin-left: 64px;
    }
    
    .navbar {
      height: 60px;
      background: #fff;
      border-bottom: 1px solid #e8eaed;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 900;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .navbar-left {
        display: flex;
        align-items: center;
        
        .toggle-button {
          padding: 8px;
          margin-right: 16px;
          color: #666;
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
        
        .el-breadcrumb {
          :deep(.el-breadcrumb__item) {
            .el-breadcrumb__inner {
              color: #666;
              font-weight: normal;
              
              &.is-link {
                color: var(--el-color-primary);
                font-weight: 500;
                
                &:hover {
                  color: var(--el-color-primary-light-3);
                }
              }
            }
          }
        }
      }
      
      .navbar-right {
        .admin-info {
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 4px 8px;
          border-radius: 4px;
          transition: all 0.3s;
          
          &:hover {
            background: rgba(0, 0, 0, 0.04);
          }
          
          .el-avatar {
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
          
          .admin-name {
            margin: 0 8px;
            color: #333;
            font-weight: 500;
          }
          
          .el-icon {
            color: #666;
            font-size: 12px;
          }
        }
        
        :deep(.el-dropdown-menu) {
          padding: 4px 0;
          
          .el-dropdown-menu__item {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            
            .el-icon {
              margin-right: 8px;
              font-size: 16px;
            }
            
            &:hover {
              background: var(--el-color-primary-light-9);
              color: var(--el-color-primary);
            }
          }
        }
      }
    }
    
    .content {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
      
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.3s ease;
      }
      
      .fade-enter-from,
      .fade-leave-to {
        opacity: 0;
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .admin-container {
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      transform: translateX(-100%);
      
      &.sidebar-collapse {
        transform: translateX(0);
      }
    }
    
    .main-container {
      margin-left: 0 !important;
      
      .navbar {
        padding: 0 16px;
        
        .navbar-left {
          .el-breadcrumb {
            display: none;
          }
        }
        
        .navbar-right {
          .admin-name {
            display: none;
          }
        }
      }
      
      .content {
        padding: 16px;
      }
    }
  }
}
</style>
